<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>借贷管理-待审核</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
                    <el-breadcrumb-item>待审核</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <div class="panel">
            <h4>已接单待审核列表</h4>
            <div class="layout-page-box">
                <el-table
                        :data="unauditList"
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="user_name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="mobile"
                            label="手机号码"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="id_card_no"
                            label="身份证号码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="apply_amount"
                            label="借款金额(元)"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="duration"
                            label="借款周期(天)"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="create_date"
                            label="申请时间"
                            sortable="custom"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="client_manager"
                            label="客户经理"
                            sortable="custom"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="160">
                        <template slot-scope="scope">
                            <el-button @click="rowAudit(scope.$index, scope.row)" type="primary" size="small">
                                <i class="fa fa-edit"></i>订单处理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div class="panel">
            <h4>借条申请池</h4>
            <div class="layout-page-box">
                <el-form :inline="true" label-width="80px" label-position="right" :model="filters" class="search-form">
                    <el-form-item label="姓名">
                        <el-input v-model="filters.column.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="filters.column.mobile" placeholder="电话"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="filters.column.id_card_no" placeholder="身份证"></el-input>
                    </el-form-item>
                    <el-form-item label="订单号">
                        <el-input v-model="filters.column.order_number" placeholder="订单号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search()"><i class="fa fa-search"></i>查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="layout-page-box">
                <el-table
                        :data="list"
                        border
                        @sort-change="sortChanged"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            prop="user_name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="mobile"
                            label="手机号码"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="id_card_no"
                            label="身份证号码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="apply_amount"
                            label="借款金额(元)"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="duration"
                            label="借款周期(天)"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="create_date"
                            label="申请时间"
                            sortable="custom"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="client_manager"
                            label="最近一次客户经理"
                            width="160"
                            sortable="custom">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="160">
                        <template slot-scope="scope">
                            <el-button @click="rowView(scope.$index, scope.row)" type="default" size="small">
                                <i class="fa fa-eye"></i>详情
                            </el-button>
                            <el-button @click="rowAgree(scope.$index, scope.row)" type="primary" size="small">
                                <i class="fa fa-edit"></i>接单
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @current-change="pageChanged"
                        :current-page="filters.pagination.page"
                        :page-size="filters.pagination.limit"
                        layout="total, prev, pager, next, jumper"
                        :total="filters.pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                filters: {
                    column: {
                        name: '',
                        mobile: '',
                        id_card_no: '',
                        order_number: '',
                        apply_date: ''
                    },
                    pagination: {
                        page: 1,
                        limit: 10,
                        total: 0
                    },
                    order: ''
                },
                list: [],
                unauditList: [],
                dialogFormVisible: false
            }
        },
        methods: {
            search() {
                this.filters.pagination.page = 1
                this.query()
            },
            rowAgree(index, row) {
                this.$confirm('确认接单吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.request('Akali/lr/pick', {
                        id: row.id
                    }, 'POST').then((res) => {
                        this.$message({
                            type: 'success',
                            message: '接单成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            rowView(index, row) {
                router.push({path: '/loan/details', query: {id: row.id, entry: 0}})
            },
            pageChanged(page) {
                this.filters.pagination.page = page
                this.query()
            },
            sortChanged(sort) {
                this.filters.order = _g.sortFilter(sort)
                this.query()
            },
            query(){
                var queries = {
                    name: this.filters.column.name,
                    mobile: this.filters.column.mobile,
                    id_card_no: this.filters.column.id_card_no,
                    order_number: this.filters.column.order_number,
                    page: this.filters.pagination.page,
                    limit: this.filters.pagination.limit,
                    order: this.filters.order
                }

                api.request('Akali/lr/applyList', queries, 'POST').then((res)=>{
                    this.list = res.data.list
                    this.filters.pagination.total = parseInt(res.data.total)
                });
            },
            getUnauditList(){
                api.request('Akali/lr/lrList', {}, 'POST').then((res)=>{
                    this.unauditList = res.data.list
                });
            }
        },
        created() {
            this.getUnauditList()
            this.query()
        }
    }
</script>